import { useEffect, useState, useRef } from "react";

function Zoommodule(props) {
  console.log(22, props);

  // const [currentImg,setCurrentImg] = useState('') // 默认展示的第一张图
  // const [flag,setFlag] = useState(false) // 控制放大图和遮罩层的显示和隐藏
  // const [left,setLeft] = useState(0) // 放大图的坐标（相对于显示区域左上角）
  // const [top,setTop] = useState(0)
  // const [l,setL] = useState(0)  // 小图上遮罩层的坐标（相对于小图的左上角）
  // const [t,setT] = useState(0)
  // const daRef = useRef()
  // console.log(111,daRef);

  // function move(e) {
  //     // 鼠标相对于网页左上角的坐标
  //     let x = e.pageX;
  //     let y = e.pageY;
  //     // 放大镜组件左上角(也就是主图左上角)相对于网页左上角的坐标
  //     let ot = this.$refs.img_box.offsetTop;
  //     let ol = this.$refs.img_box.offsetLeft;
  //     // 计算鼠标相对于主图左上角的坐标
  //     x -= ol;
  //     y -= ot;
  //     // 限制鼠标相对于大图的坐标变化范围,
  //     // 最小值(130) = 遮罩层宽度(260) / 2
  //     // 最大值(270) = 主图宽度(400) - 遮罩层宽度(260) / 2
  //     x = x < 130 ? 130 : x;
  //     x = x > 270 ? 270 : x;
  //     y = y < 130 ? 130 : y;
  //     y = y > 270 ? 270 : y;
  //     // 在这个范围内,让遮罩层跟随鼠标移动
  //     // 遮罩层左上点坐标(this.l) = 遮罩层中心点坐标(就是鼠标坐标x) - 遮罩层宽度(260) / 2
  //     l = x - 130;
  //     t = y - 130;
  //     // 计算右侧放大图坐标
  //     // 左侧遮罩层移动范围(140) = 遮罩层最大坐标(270) - 遮罩层最小坐标(130)
  //     // 右侧放大图移动范围(-280) = 显示区域尺寸(480) - 放大图实际尺寸(760)
  //     // 得出: 右侧放大图和左侧遮罩层移动的坐标比例关系  -280 / 140 = -2
  //     // 即: 假设遮罩层移动距离为x, 放大图需要移动距离 -2x
  //     this.left = -2 * this.l;
  //     this.top = -2 * this.t;
  //   }

  return (
    <div>
      {/* 放大镜 */}
      {/* <div
        className="img_box"
        ref={daRef}
        onMousemove="move"
        onMouseover="flag = true"
        onMouseout="flag = false"
      > */}
        {/* 小图  */}
        {/* <img src={currentImg} /> */}
        {/* 右侧大图  */}
        {/* <div class="big_img_box" v-show="flag">
          <img
            src={currentImg}
            style="{ left: left + 'px', top: top + 'px' }"
            alt=""
          />
        </div> */}
        {/* 小图上的遮罩层  */}
        {/* <div
          className="mark"
          style="{ left: l + 'px', top: t + 'px' }"
          v-show="flag"
        ></div> */}
      {/* </div> */}
      <div className="img_btns">
        {
          // onClick={currentImg=img}
          props?.imgs?.map((img, i) => {
            <img
              className="{active:img == currentImg}"
              key={i}
              
              src={img}
              alt=""
            />;
          })
        }
      </div>
    </div>
  );
}
export default Zoommodule;
